<!-- 订单详情 -->
<template>
  <div class="order_detail">
    <div class="table_box" id="print_box">
      <div class="order_detail_container">
        <div class="order_info_box">
          <div class="top">
            <span>订单编号 : {{orderInfo.orderCode}}</span>
            <span style="margin-left: 20px;" >状态 : <span :class="statusClass">{{orderInfo.paymentStatus}}</span></span>
            <span class="fr print not-print" @click="print">打印</span>
            <div class="clear"></div>
          </div>

          <div class="order_info">
            <h4 class="sub_title">基本信息</h4>
            <ul class="basic_info_list">
              <li class="basic_info_item">姓名 : {{orderInfo.studentName}}</li>
              <li class="basic_info_item">性别 : {{orderInfo.sex == 1 ? '男': orderInfo.sex == 2 ? '女': ''}}</li>
              <li class="basic_info_item">联系人 : {{orderInfo.linkPerson}}</li>
              <li class="basic_info_item">微信 : {{orderInfo.wechat}}</li>
              <li class="basic_info_item">校区 : {{orderInfo.schoolName}}</li>
              <li class="basic_info_item">手机号码 : {{orderInfo.linkPhone}}</li>
              <li class="basic_info_item">身份证号 : {{orderInfo.idCard}}</li>
            </ul>
          </div>

          <div class="product_info">
            <h4 class="sub_title">报名信息</h4>
            <adminTable  :tableHead="tableHead" :tableData="tableData"></adminTable>
          </div>

          <div class="discount_info">
            <h4 class="sub_title">优惠信息</h4>
            <adminTable  :tableHead="tableHead_discount" :tableData="tableData_discount"></adminTable>
          </div>


          

          <!-- 付款信息 -->
          <div class="price_info">
            <!-- label-width="80px" label-position="left"  -->
            <!-- 定金 / 全款 -->
            <h4 class="sub_title" style="color: #606266;">付款信息</h4>
            <div v-if="orderInfo.paymentStatus !== '分期' && orderInfo.paymentStatus !== '分期已缴清'">
              <el-form :model="orderInfo" :rules="rules" :inline="true" class="orderInfo">
                <el-form-item size="mini" label="合计(元) : ">
                  <el-input  v-text="orderInfo.standardPrice" disabled style="width: 80px;"></el-input>
                </el-form-item>
                <el-form-item size="mini" label="实收金额(元) : ">
                  <el-input  v-text="orderInfo.earnestPrice || orderInfo.standardPrice" disabled style="width:80px;"></el-input>
                </el-form-item>
                <el-form-item size="mini" label="交费类型 : ">
                  <el-input  v-text="orderInfo.paymentType" disabled style="width: 80px;"></el-input>
                </el-form-item>
                <el-form-item size="mini" label="支付方式 : ">
                  <el-input  v-text="orderInfo.paymentMethod" disabled style="width:80px;"></el-input>
                </el-form-item>

                <div class="clear"></div>

                
                <el-form-item size="mini" label="经办人 : ">
                  <el-input  v-text="orderInfo.createByName" disabled style="width: 90px;"></el-input>
                </el-form-item>
                <el-form-item size="mini" label="课程顾问 : ">
                  <!-- <el-input   v-model="orderInfo.personName" disabled style="width:103px;"></el-input> -->
                  <el-select v-if="isUpdate" v-model="orderInfo.personId" @change="changePerson" style="width: 103px"  placeholder="">
                    <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                  </el-select>
                  <el-input v-else  v-text="orderInfo.personName" disabled style="width:103px;"></el-input>
                </el-form-item>

                
                <el-form-item size="mini" label="创建时间 : ">
                  <el-input  v-text="orderInfo.createTime" placeholder="创建时间"></el-input>
                </el-form-item>


                <el-form-item size="mini" label="备注 : ">
                  <el-input  v-text="orderInfo.remark" placeholder="备注" style="width:650px"></el-input>
                </el-form-item>


                <!-- 补尾款详情 -->
                <div class="supplement completion_box" v-if="orderInfo.bmOrderSupplement">
                  <el-form-item size="mini" label="合计(元) : ">
                    <el-input  v-text="orderInfo.standardPrice" disabled style="width: 80px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="实收金额(元) : ">
                    <el-input  v-text="orderInfo.bmOrderSupplement.supplementPrice" disabled style="width:80px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="交费类型 : ">
                    <el-input  v-text="'补余款'" disabled style="width: 80px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="支付方式 : ">
                    <el-input  v-text="orderInfo.bmOrderSupplement.paymentMethod" disabled style="width:80px;"></el-input>
                  </el-form-item>

                  <div class="clear"></div>

                  
                  <el-form-item size="mini" label="经办人 : ">
                    <el-input  v-text="orderInfo.bmOrderSupplement.createByName" disabled style="width: 90px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="课程顾问 : ">
                    <el-select v-if="isUpdate" v-model="orderInfo.bmOrderSupplement.personId"  style="width: 103px"  placeholder="">
                      <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                    </el-select>
                    <el-input v-else v-text="orderInfo.bmOrderSupplement.personName" disabled style="width:103px;"></el-input>
                  </el-form-item>


                  <el-form-item size="mini" label="创建时间 : ">
                    <el-input  v-text="orderInfo.bmOrderSupplement.createTime" placeholder="创建时间"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="备注 : ">
                    <el-input  v-text="orderInfo.bmOrderSupplement.remark" placeholder="备注" style="width:650px"></el-input>
                  </el-form-item>
                </div>
                <!-- 补尾款详情 end -->

                <!-- 补余款 -->
                <div v-if="completionPriceStatus" class="completion_box fl">
                  <h4 class="sub_title">补余款</h4>
                  <el-form-item size="mini" label="合计 : ">
                    <el-input  v-model="completionPrice.paymentPrice" disabled style="width: 94px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="交费类型 : ">
                    <!-- <el-input  v-model="completionPrice.paymentType" disabled style="width: 80px;"></el-input> -->
                    <el-select style="width: 85px" v-model="completionPrice.paymentType" placeholder="">
                      <el-option label="全款" value="2"></el-option>
                      <el-option label="分期" value="3"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item size="mini" label="支付方式 : ">
                    <el-select style="width: 85px" v-model="completionPrice.paymentMethod" placeholder="">
                      <el-option label="微信" value="1"></el-option>
                      <el-option label="支付宝" value="2"></el-option>
                      <el-option label="银联" value="3"></el-option>
                      <el-option label="代付" value="4"></el-option>
                    </el-select>
                  </el-form-item>

                  <div class="clear"></div>

                  <el-form-item size="mini" label="经办人 : ">
                    <el-input  v-model="completionPrice.createByName" disabled style="width: 80px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="课程顾问 : ">
                    <!-- <el-input  v-model="completionPrice.personName"  style="width:80px;"></el-input> -->
                    <el-select @change="changePerson" style="width: 80px" v-model="completionPrice.personId" placeholder="">
                      <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item size="mini">
                    <el-input  v-model="completionPrice.remark"  type="textarea" :rows="2" maxlength="100" show-word-limit placeholder="备注"></el-input>
                  </el-form-item>

                  <div>
                    <span>本次应缴费用 : <span style="color: red; font-size: 16px;">￥{{completionPrice.paymentPrice}}</span></span>
                  </div>

                  
                </div>

                <!-- 补余款分期 -->
                <div v-if="completionPrice.paymentType == 3" class="fl" style="margin-top: 20px; position: relative;">
                  <!-- 分期 -->
                  <div  class="fl">
                    <div class="fl">
                      <div class="stages_item" v-for="(item, index) in completionPrice.bmOrderStagesList" :key="index">
                        <el-form-item :label="'第' + (Number(index) + 1) + '期'"  style=""  prop="studentName"  size="mini" class="fl specialWidth no_margin_right">
                          <el-input v-model="item.stagesPrice" placeholder="元" style="width: 100px;"></el-input>
                        </el-form-item>
                        <el-form-item label="时间"  style="width: 265px; margin-bottom: 0; margin-left: 25px;"  prop="studentName"  size="mini" class="fl specialWidth2 no_margin_right">
                          <el-date-picker
                            style="width: 215px;" 
                            v-model="item.stagesTime"
                            :default-time="['00:00:00', '23:59:59']"
                            type="daterange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                          </el-date-picker>
                        </el-form-item>
                        <div class="clear"></div>
                      </div>
                    </div>
                    <i @click="addStages()" class="add_input fl el-icon-circle-plus-outline"></i>
                    
                    <div class="clear"></div>
                  </div>
                </div>
                <!-- 补余款分期 end -->

                <!-- 补余款 end -->

                <div v-if="refundStatus">
                  <!-- <el-form-item size="mini" label="可退金额 : ">
                    <span style="color: red;">{{orderInfo.paymentPrice}} 元</span>
                  </el-form-item> -->

                  <el-form-item prop="refundPrice" size="mini" label="退费金额 : " class="refundPrice">
                    <el-input  v-model="orderInfo.refundPrice" style="width: 150px;" placeholder="请输入退费金额(元)"></el-input>
                  </el-form-item>

                  <div style="text-align: center;">
                    <!-- <el-button type="primary" @click="refundStatus = false" size="small">返回</el-button> -->
                    <!-- <el-button type="primary" v-if="refundStatus" @click="efundPriceSubmit" size="small">确认退费</el-button> -->
                  </div>
                </div>

                
                <div class="clear"></div>
              </el-form>

              <!-- 退费信息 -->
              <div class="refund_info" v-if="orderInfo.bmOrderRefund">
                <h4 class="sub_title" style="color: #606266;">退费信息</h4>
                <div>
                  <el-form :model="refundInfo"  :inline="true" class="refundInfo">
                    <el-form-item size="mini" label="退费金额(元) : ">
                      <el-input  v-text="refundInfo.refundPrice"  style="width: 55px;"></el-input>
                    </el-form-item>

                    <el-form-item size="mini" label="经办人 : ">
                      <el-input  v-text="refundInfo.createByName"  style="width: 115px;"></el-input>
                    </el-form-item>

                    <el-form-item size="mini" label="退费时间 : ">
                      <el-input  v-text="refundInfo.createTime"></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 退费信息 -->
              
              <div style="text-align: center; margin-top: 20px;">
                <el-button type="warning" plain class="btn_reback not-print" @click="reback" size="small">返 回</el-button>
                <el-button type="warning" v-if="isUpdate" plain class="btn_reback not-print" @click="submitUpdate" size="small">提 交</el-button>
                <el-button type="primary" v-if="refundStatus" @click="efundPriceSubmit" size="small">确认退费</el-button>
                <el-button v-if="completionPriceStatus" @click="btnCompletionPriceSubmit" type="primary" size="small">结 算</el-button>
                <div style="display: inline-block;margin-left: 10px;" v-if="!refundStatus && orderInfo.paymentStatus !== '已退费'">
                  <el-button type="primary" v-if="orderInfo.paymentStatus == '定金' && !completionPriceStatus && isPayback" @click="btnCompletionPrice" size="small">补余款</el-button>
                  <el-button type="primary" v-if="isRefund" @click="btnRefundPrice" size="small">退 费</el-button>
                </div>
              </div>
              
            </div>
            <!-- 定金 / 全款 -->

           

            <!-- 分期详情 -->
            <div v-else>
              <el-form :model="orderInfo"  :inline="true" class="orderInfo">
                <el-form-item size="mini" class="fl" label="合计(元) : ">
                  <el-input  v-text="orderInfo.standardPrice" disabled style="width: 80px;"></el-input>
                </el-form-item>

                <div>
                  <el-form-item size="mini" class="fl" label="交费类型 : ">
                    <div style="width: 80px;">
                      <el-input v-text="orderInfo.paymentType" disabled class="fl" style="width: auto;"></el-input>
                      <span class="fl" style="font-size: 12px;" v-if="orderInfo.earnestPrice">￥{{orderInfo.earnestPrice}}</span>
                      <div class="clear"></div>
                    </div>
                  </el-form-item>
                  <!-- <div class="clear"></div> -->

                  <!-- <el-form-item v-if="orderInfo.earnestPrice" size="mini" class="fl" label="定金金额 : ">
                    <el-input v-text="orderInfo.earnestPrice" disabled style="width: 55px; "></el-input>
                  </el-form-item> -->
                </div>

                <!-- <div class="clear"></div> -->

                <!-- 分期 -->
                <div class="fl">
                  <div class="">
                    <div class="stages_item" 
                      v-for="(item, index) in orderInfo.bmOrderStagesList" :key="index">
                      <el-form-item size="mini" :label="'第' + Number(index + 1) + '期(元) : '">
                        <el-input  v-text="item.stagesPrice" disabled style="width:40px;"></el-input>
                      </el-form-item>
                      <el-form-item size="mini" label="时间 : " class="time">
                        <span style="font-size: 12px;">{{item.stagesStartTime}} 至 {{item.stagesEndTime}}</span>
                        <!-- <el-date-picker
                          style="width: 215px;" 
                          disabled
                          v-text="item.stagesTime"
                          type="daterange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker> -->
                      </el-form-item>
                      
                    </div>
                  </div>
                  <div class="clear"></div>
                </div>
                <!-- 分期 -->

                
                <div class="clear"></div>

                <div style="margin-bottom: 20px;" v-if="orderInfo.paymentStatus != '分期已缴清'">
                  <span>共 {{orderInfo.bmOrderStagesList.length}} 期</span>
                  <span style="margin-left: 20px;">当前期次 : 第 {{computedStages}} 期</span>
                </div>

                

                <!-- 分期补缴 前 -->
                <div v-if="!completionStagesStatus">
                  <el-form-item size="mini" label="实收金额(元) : ">
                    <el-input  v-text="orderInfo.paymentPrice" disabled style="width:80px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="支付方式 : ">
                    <el-input  v-text="orderInfo.paymentMethod" disabled style="width:80px;"></el-input>
                  </el-form-item>


                  

                  <el-form-item size="mini" label="经办人 : ">
                    <el-input  v-text="orderInfo.createByName" disabled style="width: 116px;"></el-input>
                  </el-form-item>
                  <el-form-item size="mini" label="课程顾问 : ">
                    <el-select v-if="isUpdate" v-model="orderInfo.personId"  style="width: 103px"  placeholder="">
                      <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                    </el-select>
                    <el-input v-else v-text="orderInfo.personName" disabled style="width:80px;"></el-input>
                  </el-form-item>

                  <el-form-item size="mini" label="备注 : ">
                    <el-input  v-text="orderInfo.remark" disabled style="width:650px" placeholder="备注"></el-input>
                  </el-form-item>
                </div>
                <!-- 分期补缴 前 -->

                <!-- 分期详细信息 -->
                <div  class="stages_info">
                  <div class="stages_info_item" v-for="(item, index) in payedStagesList" :key="index">
                    <div>
                      <span>期次 : 第 {{Number(index + 1)}} 期</span>
                    </div>

                    <ul class="info_list">
                      <li style="width:210px">本次实收金额(元) : {{item.stagesPrice}}</li>
                      <li style="width:185px">支付方式 : {{item.paymentMethodName}}</li>
                      <li style="width:210px">经办人 : {{item.createByName}}</li>
                      <!-- <li>课程顾问 : {{item.personName}}</li> -->
                      <el-form-item size="mini" label="课程顾问 : ">
                        <el-select v-if="isUpdate" v-model="item.personId"  style="width: 103px"  placeholder="">
                          <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                        </el-select>
                        <el-input v-else v-text="item.personName"></el-input>
                      </el-form-item>
                      <li style="width:210px">创建时间 : {{item.updateTime || item.createTime}}</li>
                      <li style="width: 580px;">备注 : {{item.remark}}</li>
                    </ul>
                  </div>
                </div>
                <!-- 分期详细信息 -->

                <!-- 补缴分期 -->
                <div v-if="completionStagesStatus">
                  <h4 class="sub_title">填写本期缴费信息</h4>
                  <el-form-item size="mini" label="本期应缴金额 : "  style="width: 165px;">
                    <!-- <el-input  disabled  style="width:80px;">{{currentStages.stagesPrice}}</el-input> -->
                    <span>￥{{currentStages.stagesPrice}}</span>
                  </el-form-item>
                  <el-form-item size="mini" label="支付方式 : ">
                    <!-- <el-input  v-model="orderInfo.paymentMethod"  style="width:80px;"></el-input> -->
                    <el-select style="width: 85px" v-model="currentStages.paymentMethod" placeholder="">
                      <el-option  label="微信" value="1"></el-option>
                      <el-option  label="支付宝" value="2"></el-option>
                      <el-option  label="银联" value="3"></el-option>
                      <el-option  label="代付" value="4"></el-option>
                    </el-select>
                  </el-form-item>
                  <div class="clear"></div>
                  <el-form-item size="mini" label="经办人 : " style="width: 165px;">
                    <!-- <el-input  disabled style="width: 122px;">{{currentStages.createByName}}</el-input> -->
                    {{currentStages.createByName}}
                  </el-form-item>
                  <el-form-item size="mini" label="课程顾问 : ">
                    <!-- <el-input  v-model="orderInfo.personName"  style="width:80px;"></el-input> -->
                    <el-select @change="changePerson" style="width: 85px" v-model="currentStages.personId" placeholder="">
                      <el-option v-for="(item, index) in personList" :key="index" :label="item.employeesName" :value="item.employeesId"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item size="mini" label="备注 : ">
                    <!-- <el-input  v-model="currentStages.remark"  style="width:250px;" placeholder="备注"></el-input> -->
                    <!-- <el-input  v-model="currentStages.remark" placeholder="备注" style="width:650px"></el-input> -->
                    <el-form-item  style="margin-bottom: 0; wdith: 200px;"  size="mini" class="fr ml0 no_margin_right">
                      <el-input type="textarea" :rows="1" style="width: 200px;" maxlength="100" show-word-limit v-model="currentStages.remark" placeholder="备注"></el-input>
                    </el-form-item>
                  </el-form-item>

                  <div class="clear"></div>
                  <div>
                    <span>本次应缴费用 : <span style="color: red; font-size: 16px;">￥{{currentStages.stagesPrice}}</span></span>
                  </div>
                  <div style="text-align: center;">
                    <el-button type="primary" @click="completionStagesStatus = false;" size="small">返回</el-button>
                    <el-button type="primary" @click="paymentStages" size="small">确认缴纳</el-button>
                  </div>
                </div>
                <!-- 补缴分期 -->

                <div v-if="refundStatus">
                  <el-form-item size="mini" label="累计缴费 : ">
                    <span style="color: red; font-size: 16px;">{{orderInfo.paymentPrice}} 元</span>
                  </el-form-item>

                  <el-form-item size="mini" prop="refundPrice" label="退费金额 : " class="refundPrice">
                    <el-input  v-model="orderInfo.refundPrice" style="width: 150px;" placeholder="请输入退费金额(元)"></el-input>
                  </el-form-item>

                  <div style="text-align: center;">
                    <el-button type="primary" @click="refundStatus = false" size="small">返回</el-button>
                    <el-button type="primary" @click="efundPriceSubmit" size="small">确认退费</el-button>
                  </div>
                </div>


                <div style="text-align: center; margin-top: 20px;" v-if="!completionStagesStatus && !refundStatus && orderInfo.paymentStatus !== '已退费'">
                  <el-button type="warning" plain class="btn_reback not-print" @click="reback" size="small">返 回</el-button>
                  <el-button type="warning" v-if="isUpdate" plain class="btn_reback not-print" @click="submitUpdate" size="small">提 交</el-button>
                  <el-button type="primary" v-if="orderInfo.paymentStatus == '分期' && isPayback" @click="btnCompletionStages" size="small">补缴分期</el-button>
                  <el-button type="primary" v-if="isRefund" @click="btnRefundPrice" size="small">退费</el-button>
                </div>
                <div class="clear"></div>
              </el-form>
            </div>
            <!-- 分期详情 -->
          </div>

          

        </div>
      </div>
    </div>
    
    <!-- <div style="text-align: center; margin: 20px 0;">
      <el-button type="warning" plain class="btn_reback" @click="reback" size="small">返 回</el-button>
    </div> -->
  </div>
</template>


<style>
#print_box {
  background: #fff;
}
.refundPrice input{
  border: 1px solid #FC8434 !important;
}
.refundPrice.is-success input {
  border-color: #67C23A !important;
}
.order_detail_container .el-form-item__label {
  color: #666;
}
.order_detail_container .el-button--primary {
  background-color: #77A4FF;
  border-color: #77A4FF;
}
.order_detail_container .el-button--primary:hover {
  background-color: #7490ca;
  border-color: #7490ca;
}

.order_detail .el-button--warning.is-plain {
  color: #fff !important;
  background: #87aefc !important;
  border-color: #87aefc !important;
}
.order_detail .el-button--warning.is-plain:hover {
  background: #7490ca !important;
  border-color: #7490ca !important;
}
.order_detail_container .el-form--inline .el-form-item {
  margin-right: 30px;
}

.order_detail_container .price_info .el-form-item--mini.el-form-item{
  margin-bottom: 10px !important;
  /* #909399 */
}
.order_detail_container .price_info .el-form-item__label {
  
  color: #909399 !important;
}
.order_detail_container .price_info{
  color: #909399 !important;
}
.order_detail_container .price_info .el-form-item__label {
  /* width: 100px !important; */
  text-align: left;
}

.order_detail_container .price_info .time .el-form-item__label {
  width: 60px !important;
}
</style>
<style scoped>

.stages_info{
  padding-top: 10px;
  border-top: 1px solid #F0F2F5;
}
.completion_box{
  border-top: 1px solid #F0F2F5;
  padding-top: 15px;
}
.print{
  cursor: pointer;
  /* font-size: 14px; */
  color: #77A4FF;
}
.stages_info_item{
  border-bottom: 1px solid #F0F2F5;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.stages_info_item .info_list li {
  display: inline-block;
  width: 24%;
  margin-top: 10px;
}

.order_detail_container {
  padding: 20px 40px;
  box-sizing: border-box;
}

.order_info_box {
  color: #606266
}
.order_info_box > div {
  margin-bottom: 20px;
}

.basic_info_list {
  padding: 0 20px;
  box-sizing: border-box;
}
.basic_info_list li {
  display: inline-block;
  width: 24%;
}
.basic_info_list li:nth-child(-n+4) {
  margin-bottom: 15px;
}
.basic_info_list li:last-child {
  width: auto;
}
.sub_title {
  /* font-size: 14px; */
  margin-bottom: 10px;
}

.status1 { color: #FFC834 }
.status2 { color: #77A4FF }
.status3 { color: #80D784 }
.status4 { color: #909399 }

@media print {
    .not-print {
        opacity: 0
    }
}
</style>

<script>
import adminTable from '@/components/assembly/adminTable'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("orderDetail");
export default {
  name: 'orderDetail',
  data() {
    return {
      jwtAuth: {},
      orderInfo: {
      },
      refundPrice: '',
      refundStatus: false,                // 退费 状态
      completionStagesStatus: false,      // 补缴分期 状态
      completionPriceStatus: false,       // 补余款 状态
      isRefund: false,       // 是否点击 已退费 按钮
      isPayback: false,       // 是否点击 补缴 按钮
      isUpdate: false,       // 是否点击 编辑 按钮
      currentStagesPrice: '',
      currentStagesRemark: '',
      currentStagesId: '',
      currentStages: {
        stagesPrice: '',
        orderStagesId: '',
        paymentMethod: '1',
        remark: '',
        createByName: '',
        personId: '',
      },
      completionPrice: {
        paymentMethod: '1',
        paymentType: '2',
        bmOrderStagesList: [
          {
            stagesPrice: '',
            stagesTime: [],
          }
        ]
      },
      tableHead: {
        // border: true,
        // order: true,
        data: [
          {
            name: '课程产品名称',
            key: 'productName',
            align: 'center',
          },
          {
            name: "课程产品编号",
            key: "productCode",
            align: "center",
          },
          {
            name: "大类",
            key: "courseName",
            align: "center",
            width: '100px',
          },
          {
            name: "总课时数",
            key: "totalHour",
            align: "center",
          },
          {
            name: "周数",
            key: "weekMun",
            align: "center",
            width: '50',
          },
          {
            name: "课程指导价(元)",
            key: "productPrice",
            align: "center",
          },
          {
            name: "餐费(元)",
            key: "mealsPrice",
            align: "center",
            width: '70',
          },
          {
            name: "杂费(元)",
            key: "incidentalPrice",
            align: "center",
            width: '70',
          },
          {
            name: "其它费用(元)",
            key: "otherPrice",
            align: "center",
            width: '70',
          },
          {
            name: "实际售价(元)",
            key: "totalPrices",
            align: "center",
            width: '90',
          },
        ]
      },
      tableData: [],
      tableHead_discount: {
        // border: true,
        // order: true,
        data: [
          {
            name: '优惠类型',
            key: 'discountType',
            align: 'center',
            filter: {
              1: '时效优惠',
              2: '团报优惠',
              3: '当天优惠',
              4: '其它优惠',
            }
          },
          {
            name: "优惠描述",
            key: "remarkDiscount",
            align: "center",
          },
          {
            name: "优惠生效期",
            key: "validityTime",
            align: "center",
          },
          {
            name: "优惠力度",
            key: "discountPrice",
            align: "center",
          },
        ]
      },
      tableData_discount: [],

      personList: [],   // 顾问
      payedStagesList: [],
      personName: '',
      rules: {
        refundPrice: [
          { required: true, message: '请输入退费金额', trigger: 'blur' },
          {pattern: /^[0-9]*$/, message: '格式错误'}
        ],
      }
    }
  },

  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    this.currentStages.createByName = this.jwtAuth.employeesName;


    let order = this.$route.params;
    // let order = {
    //   orderId: '5903ce037e134c3e884622584b8a1164'
    // };
    if(sessionStorage.getItem('orderId')) {
      order.orderId = sessionStorage.getItem('orderId');
    }
    // console.log(order)
    if(order.isRefund) {
      this.isRefund = order.isRefund
    }
    if(order.isPayback) {
      this.isPayback = order.isPayback
    }
    if(order.isUpdate) {
      this.isUpdate = order.isUpdate
    }

    
    if(order.orderId) {
      this.initOrderData(order.orderId);
    }else{
      this.$router.push({
        name: 'enrolmentManagement'
      })
    }
    
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    // mappingPaymethod(value, target) {
    //   console.log(target)
    //   switch (value) {
    //     case '1':
    //       target = '微信'
    //       break;
    //     case '2':
    //       target = '支付宝'
    //       break;
    //     case '3':
    //       target = '银联'
    //       break;
      
    //     default:
    //       break;
    //   }
    // },

    initOrderData(orderId) {
      this.formGet({
        API: 'selectById',
        data: {
          id: orderId
        }
      }).then(res => {
        console.log(res);
        this.orderInfo = res;
        this.refundInfo = res.bmOrderRefund
        this.tableData = res.bmSchoolOpenOutList;
        this.tableData_discount = res.bmSchoolOpenOutList[0].bmOrderHistoryExitList
        this.tableData_discount.forEach(item => {
          if(item.validityStartTime) {
            item.validityTime = `${item.validityStartTime.split(' ')[0]} - ${item.validityEndTime.split(' ')[0]}`
          }else{
            item.validityTime = '不限'
          }
          item.discountPrice = `${item.discountPrice} ${item.discountMethod == 1? '%' : '元'}`
        })


        switch (this.orderInfo.paymentStatus) {
          case '1':
            this.orderInfo.paymentStatus = '定金'
            break;
          case '2':
            this.orderInfo.paymentStatus = '已缴清'
            break;
          case '3':
            this.orderInfo.paymentStatus = '分期'
            break;
          case '4':
            this.orderInfo.paymentStatus = '已退费'
            break;
          case '5':
            this.orderInfo.paymentStatus = '分期已缴清'
            break;
          case '0':
            this.orderInfo.paymentStatus = '已作废'
            break;
        
          default:
            break;
        }

        switch (this.orderInfo.paymentType) {
          case '1':
            this.orderInfo.paymentType = '定金'
            break;
          case '2':
            this.orderInfo.paymentType = '全款'
            break;
          case '3':
            this.orderInfo.paymentType = '分期'
            break;
        
          default:
            break;
        }

        switch (this.orderInfo.paymentMethod) {
          case '1':
            this.orderInfo.paymentMethod = '微信'
            break;
          case '2':
            this.orderInfo.paymentMethod = '支付宝'
            break;
          case '3':
            this.orderInfo.paymentMethod = '银联'
            break;
          case '4':
            this.orderInfo.paymentMethod = '代付'
            break;
        
          default:
            break;
        }


        if(this.orderInfo.bmOrderSupplement) {
          switch (this.orderInfo.bmOrderSupplement.paymentMethod) {
            case '1':
              this.orderInfo.bmOrderSupplement.paymentMethod = '微信'
              break;
            case '2':
              this.orderInfo.bmOrderSupplement.paymentMethod = '支付宝'
              break;
            case '3':
              this.orderInfo.bmOrderSupplement.paymentMethod = '银联'
              break;
            case '4':
              this.orderInfo.bmOrderSupplement.paymentMethod = '代付'
              break;
          
            default:
              break;
          }

          this.orderInfo.paymentPrice = this.orderInfo.paymentPrice - this.orderInfo.bmOrderSupplement.supplementPrice
        }
        
        console.log('222')

        let totalPrice;


        if(this.orderInfo.paymentType == '分期') {
          this.orderInfo.bmOrderStagesList.forEach(item => {
            let arr = [];
            arr.push(item.stagesStartTime)
            arr.push(item.stagesEndTime)
            item.stagesTime = arr
          })
        }
        
        if(this.orderInfo.bmOrderStagesList) {
          this.payedStagesList = [];
          this.orderInfo.bmOrderStagesList.forEach(item => {
            if(item.paymentStatus == 1) {
              switch (item.paymentMethod) {
                case '1':
                  item.paymentMethodName = '微信'
                  break;
                case '2':
                  item.paymentMethodName = '支付宝'
                  break;
                case '3':
                  item.paymentMethodName = '银联'
                  break;
                case '4':
                  item.paymentMethodName = '代付'
                  break;
                default:
                  break;
              }
              this.payedStagesList.push(item);
            }
          })
        }

        // console.log(this.orderInfo.paymentStatus)



        this.queryAllPerson();
      }).catch(err => {
        this.$message.error(err);
      })
    },

    // 补余款
    btnCompletionPrice() {
      this.completionPriceStatus = true;
      let paymentPrice = (Number(this.orderInfo.standardPrice) - Number(this.orderInfo.paymentPrice)).toFixed(2);

      this.completionPrice.paymentPrice = paymentPrice;
      // this.completionPrice.paymentType = '';
      this.completionPrice.createByName = this.jwtAuth.employeesName;
      this.completionPrice.createBy = this.jwtAuth.employeesId;

    },

    // 补余款 添加分期
    addStages(num) {
      let obj = {
        stagesPrice: '',
        stagesTime: [],
      }

      this.completionPrice.bmOrderStagesList.push(obj);
    },

    // 补余款 结算
    btnCompletionPriceSubmit() {
      let data = {}
      Object.assign(data, this.completionPrice)
      // let data = this.completionPrice
      // data.paymentType = 2;
      data.personName = this.personName;
      data.orderId = this.orderInfo.orderId;
      data.dataId = this.orderInfo.orderId;
      data.bmProductList = [];
      let totalPrice = 0;
      data.sumPrice = data.paymentPrice

      this.tableData.forEach((item, index) => {   // 循环获取总价
        totalPrice += Number(item.totalPrice)
      })

      this.tableData.forEach((item, index) => {
        let obj = {
          productId: item.productId,
          ratio: (Number(item.totalPrice) / totalPrice).toFixed(2),
        }

        obj.productPrice = (data.paymentPrice * obj.ratio).toFixed(2);

        data.bmProductList.push(obj);
      })

      if(data.paymentType == 3) {   // 分期 计算
        let stagesTotalPrice = 0
        if(data.bmOrderStagesList.length > 0) {

          let item = data.bmOrderStagesList
          for(let i=0; i<item.length; i++) {
            if(item[i].stagesPrice !== '') {
              if(item[i].stagesTime.length == 0) {
                this.$message.error('请选择分期时间');
                return false;
                break;
              }
            }
            stagesTotalPrice += Number(item[i].stagesPrice)
            if(item[i].stagesTime) {
              item[i].stagesStartTime = item[i].stagesTime[0]
              item[i].stagesEndTime = item[i].stagesTime[1]
            }

            if(item[i].stagesPrice == '' || item[i].stagesPrice == 0) {
              item.splice(i, 1)
            }
          }

          if(stagesTotalPrice != data.sumPrice) {
            this.$message.error('分期价格计算失误, 请重新计算');
            return false;
          }
          // data.bmOrderStagesList.forEach(item => {
          //   if(item.stagesPrice !== '') {
          //     if(item.stagesTime.length == 0) {
          //       this.$message.error('请选择分期时间');
          //       return false;
          //     }
          //   }
          //   stagesTotalPrice += Number(item.stagesPrice)
          //   item.stagesStartTime = item.stagesTime[0]
          //   item.stagesEndTime = item.stagesTime[1]
          // })
        }

        data.stagesPrice = this.completionPrice.paymentPrice

        
        data.paymentPrice = data.bmOrderStagesList[0].stagesPrice
      }else{
        data.bmOrderStagesList = []
      }

      

      // console.log(totalPrice);
      // console.log(data);
      // console.log(this.tableData);

      console.log(data);
      // return false;
      this.post({
        API: 'completionPayment',
        data: data
      }).then(res => {
        // if(res == 1) {
          this.$message.success('补缴成功');
          this.completionPriceStatus = false;
          let order = this.$route.params;
          if(order.orderId) {
            this.initOrderData(order.orderId);
          }else{
            this.$router.push({
              name: 'enrolmentManagement'
            })
          }
        // }else{
        //   console.log('aaaa')
        // }
      }).catch(err => {
        this.$message.error(err);
      })
    },


    // 退费
    btnRefundPrice() {
      this.refundStatus = true;
      
    },
    efundPriceSubmit() {
      let reg = new RegExp("^[0-9]*$");

      if(!this.orderInfo.refundPrice) {
        this.$message.error('请输入退款金额');
        return false
      }
      
      if(!reg.test(this.orderInfo.refundPrice)) {
        this.$message.error('格式错误');
        return false;
      }
      if(Number(this.orderInfo.refundPrice) > Number(this.orderInfo.standardPrice)) {
        this.$message.error('实际退款金额不可大于实收金额')
        return false
      }


      let data = {
        orderId: this.orderInfo.orderId,
        refundPrice: this.orderInfo.refundPrice,
        createBy: this.jwtAuth.employeesId,
        dataId: this.orderInfo.orderId,
      }

      this.$alert("是否确认退费", "提示", {
        confirmButtonText: "确定",
        callback: act => {
          if (act == "confirm") {
            this.post({
              API: 'refundPayment',
              data: data
            }).then(res => {
              console.log(res)
              if(res == 1) {
                this.$message.success('退费成功');
                this.$router.push({
                  name: 'enrolmentManagement'
                })
              }
            }).then(err => {
              this.$message.error(err)
            })
            
          }
        }
      });

      
      
    },


    // 补缴分期
    btnCompletionStages() {
      this.completionStagesStatus = true;

      console.log(this.orderInfo)

      let currentStagesInfo = this.orderInfo.bmOrderStagesList[this.currentStagesNum]
      console.log(this.currentStagesNum)
      console.log(this.orderInfo.bmOrderStagesList);
      console.log(currentStagesInfo.stagesPrice);
      this.currentStages.stagesPrice = currentStagesInfo.stagesPrice
      this.currentStages.orderStagesId = currentStagesInfo.orderStagesId
      this.currentStages.createByName = this.jwtAuth.employeesName
      // this.currentStages.remark = '123'

    },
    // 确认缴纳 分期
    paymentStages() {
      let data = this.currentStages;
      let currentStagesInfo = this.orderInfo.bmOrderStagesList[this.currentStagesNum]

      data.stagesPrice = currentStagesInfo.stagesPrice
      data.orderStagesId = currentStagesInfo.orderStagesId
      data.orderId = this.orderInfo.orderId;
      data.dataId = this.orderInfo.orderId;
      data.personName = this.personName;
      this.currentStages.createBy = this.jwtAuth.employeesId
      data.bmProductList = [];
      let totalPrice = 0;

      this.tableData.forEach((item, index) => {   // 循环获取总价
        totalPrice += Number(item.totalPrice)
      })

      this.tableData.forEach((item, index) => {
        let obj = {
          productId: item.productId,
          ratio: (Number(item.totalPrice) / totalPrice).toFixed(2),
        }

        obj.productPrice = (data.stagesPrice * obj.ratio).toFixed(2);

        data.bmProductList.push(obj);
      })

      
      this.post({
        API: 'paymentOfInstalments',
        data: data
      }).then(res => {
        if(res == 1) {
          this.$message.success('缴纳成功');
          this.completionStagesStatus = false;

          let order = this.$route.params;
          if(order.orderId) {
            this.initOrderData(order.orderId);
          }else{
            this.$router.push({
              name: 'enrolmentManagement'
            })
          }
        }
        console.log(res)
      }).catch(err => {
        this.$message.error(err);
      })
    },

    queryAllPerson() {
      this.post({
        API: 'queryPositionListBySchoolId',
        data: {
          positionCode: [2, 5],
          // positionCode: "",
          schoolId: this.orderInfo.schoolId,
        }
      }).then(res => {
        this.personList = res;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    changePerson(e) {
      this.personList.forEach(item => {
        if(item.employeesId == e) {
          this.personName = item.employeesName;
        }
      })
      this.orderInfo.personId = e;
    },

    submitUpdate() {
      let arr = [];
      if(this.orderInfo.bmOrderSupplement) {
        arr.push(this.orderInfo.bmOrderSupplement)
      }
      let data = {
        orderId: this.orderInfo.orderId,
        personId: this.orderInfo.personId,
        bmOrderSupplementList: arr || [],
        bmOrderStagesList: this.orderInfo.bmOrderStagesList || [],
        dataId: this.orderInfo.orderId
      };

      console.log(data);
      // console.log(this.orderInfo);

      // return false;
      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        // this.$router.push({
        //   name: 'enrolmentManagement'
        // })
        this.initOrderData(this.$route.params.orderId);
      }).catch(err => {
        this.$message.error(err);
      })
    },

    // 打印
    print() {
      sessionStorage.setItem('orderId', this.orderInfo.orderId)

      let printBox = document.getElementById('print_box');
      console.log(printBox.innerHTML);
      let newContent = printBox.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      document.body.innerHTML = oldContent;
      return false;
    },
    reback() {
      this.$router.push({
        name: 'enrolmentManagement'
      })
    }
  },
  computed: {
    statusClass() {
      switch (this.orderInfo.paymentStatus) {
        case '已缴清':
          return 'status1'
          break;
        case '定金':
          return 'status2'
          break;
        case '分期':
          return 'status3'
          break;
        case '已退费':
          return 'status4'
          break;
        case '分期已缴清':
          return 'status1'
          break;
      
        default:
          break;
      }
      // return 'aaaaa'
    },

    
    computedStages() {
      
          // this.currentStages.stagesPrice = list[i+1].stagesPrice
          // this.currentStages.orderStagesId = list[i+1].orderStagesId
      let list = this.orderInfo.bmOrderStagesList;
      for(let i=0; i<list.length; i++) {
        if(list[i].paymentStatus == 0) {
          this.currentStagesNum = i
          return i+1;
          break;
        }
      }
    }
  },
  components: {
    adminTable,
  }
}
</script>